<template>
  <view class="content" :style="fullStyle">
    <!-- 详情 begin -->
    <view class="content-item-1">
      <contact-info :concat-info="concatInfo"></contact-info>
    </view>
    <!-- 详情 end -->
    <!-- 服务 begin -->
    <view class="content-item-2">
      <image class="qrcode" :src="'https://api.qrserver.com/v1/create-qr-code/?data=http://pan.vc14.com/?liaisonId='+concatInfo.id" show-menu-by-longpress ></image>
    </view>
    
    <!-- <img style="width: 300px;height: 300px;" src="https://api.qrserver.com/v1/create-qr-code?data=http://goqr.me/api/" -->

    <!-- 服务 end -->
    <!-- 代表委员列表 begin -->
    <view class="content-item-3">
      <view class="header">
        <view class="title">简介</view>
      </view>
      <view class="content text-content" style="min-height: 400rpx;">
        {{ concatInfo.liaisonDesc }}
      </view>
     
    </view> <view style="height: 120rpx;"></view>
    <!-- form-submit begin -->
    <view class="footer">
      <button @click="submitIdea" type="button" open-type="share" >转发名片</button>
    </view>
    <!-- form-submit end -->
  </view>
</template>

<script>
import ContactInfo from "@/compontent/contactInfo";
import {baseMixins} from "@/mixins/baseMixins";

export default {
  mixins: [baseMixins],
  components: {ContactInfo},
  data() {
    return {
      concatInfo: {}
    }
  },
  onLoad(option) {
    this.concatInfo = JSON.parse(decodeURIComponent(option.concatInfo));
  },
  // 分享给朋友
  onShareAppMessage(res) {
  	return {
  		title: this.concatInfo.liaisonName,
  		path: '/pages/home/contact-detail?liaisonId='+this.concatInfo.id,
  		imageUrl: this.concatInfo.liaisonPic,
  	}
  },
  // 分享到朋友圈
  onShareTimeline(res) {
  	return {
  		title: this.concatInfo.liaisonName,
  		path: '/pages/home/contact-detail?liaisonId='+this.concatInfo.id,
  		imageUrl: this.concatInfo.liaisonPic,
  	}
  },
  methods: {}
}
</script>

<style lang='scss' scoped>
    
    .footer {
      height: 120rpx;
      padding: 10rpx 50rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      z-index: 10;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    
      button {
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        color: #FFFFFF !important;
        background: linear-gradient(to bottom, #FA4D37, #C01600) !important;
      }
    }
.content {
  padding: 30rpx;
  color: #222222;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: linear-gradient(to bottom, #fff2f2, #fcc5c5);

  .content-item-1 {
    display: flex;
    flex-direction: column;
    background-color: $bg-color-white;
    border-radius: $border-radius-lg;
    margin-bottom: 60rpx;
    padding: 0 80rpx;
  }

  .content-item-2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;

    .qrcode {
      width: 474rpx;
      height: 474rpx;
    }
  }

  .content-item-3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 30rpx;
    background: #FFFFFF;
    border-radius: $border-radius-lg;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15rpx 0;
      background: linear-gradient(to right, #ffa7a7, #f52728);
      border-radius: $border-radius-lg;

      .title {
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .content {
      padding: 20rpx;
      background: #fff;
      border-radius: 0 0 20rpx 20rpx;
    }
  }
}
</style>
